import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import {
  Radio,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  message,
  Divider,
} from 'antd';
import Product from 'components/Product';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './List.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const {Option} = Select;
const columns = [
  {
    title: '产品名称',
    dataIndex: 'productName',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '产品描述',
    dataIndex: 'productDesc',
  },
  {
    title: 'Model',
    dataIndex: 'model',
  },
  {
    title: '产品类型',
    dataIndex: 'productTypeStr',
  },
  {
    title: '状态',
    dataIndex: 'productStatusStr',
  },
  {
    title: '操作',
    render: () => (
      <Fragment>
        <a href="">配置</a>
        <Divider type="vertical"/>
        <a href="">订阅警报</a>
      </Fragment>
    ),
  },
];

const CreateForm = Form.create()((props) => {
  const {modalVisible, form, handleAdd, handleModalVisible} = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  return (
    <Modal
      title="添加产品"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="产品名称"
      >
        {form.getFieldDecorator('productName', {
          rules: [{required: true, message: 'Please input some description...'}],
        })(
          <Input placeholder="请输入"/>
        )}
      </FormItem>
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="产品品牌"
      >
        {form.getFieldDecorator('brandType', {
          rules: [{required: true, message: 'Please input some description...'}],
        })(
          <Select placeholder="请选择">
            <Option value="china">China</Option>
            <Option value="use">U.S.A</Option>
          </Select>
        )}
      </FormItem>
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="产品类型"
      >
        {form.getFieldDecorator('productType', {
          rules: [{required: true, message: 'Please input some description...'}],
        })(
          <Select placeholder="请选择">
            <Option value="china">China</Option>
            <Option value="use">U.S.A</Option>
          </Select>
        )}
      </FormItem>
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="产品型号(Model)"
      >
        {form.getFieldDecorator('desc', {
          rules: [{required: true, message: 'Please input some description...'}],
        })(
          <Input placeholder="请输入"/>
        )}
      </FormItem>
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="产品描述"
      >
        {form.getFieldDecorator('productDesc', {
          rules: [{required: true, message: '请输入描述'}],
        })(
          <Input placeholder="请输入"/>
        )}
      </FormItem>
      <FormItem
        labelCol={{span: 5}}
        wrapperCol={{span: 15}}
        label="接入方式"
      >
        {form.getFieldDecorator('desc', {
          rules: [{required: true, message: 'Please input some description...'}],
        })(
          <RadioGroup>
            <Radio value="0">Wifi单模</Radio>
            <Radio value="1">蓝牙单模</Radio>
            <Radio value="2">蓝牙Wifi双模</Radio>
            <Radio value="3">其他</Radio>
          </RadioGroup>
        )}
      </FormItem>
    </Modal>
  );
});

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.rule,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {
    modalVisible: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/fetch',
    });
  }

  handleModalVisible = (flag) => {
    this.setState({
      modalVisible: !!flag,
    });
  }

  handleAdd = (fields) => {
    this.props.dispatch({
      type: 'rule/add',
      payload: {
        description: fields.desc,
      },
    });

    message.success('添加成功');
    this.setState({
      modalVisible: false,
    });
  }

  render() {
    const { product: { data }, loading } = this.props;
    const { modalVisible } = this.state;

    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
    };

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>
                新建
              </Button>
            </div>
            <Product
              loading={loading}
              data={data}
              columns={columns}
            />
          </div>
        </Card>
        <CreateForm
          {...parentMethods}
          modalVisible={modalVisible}
        />
      </PageHeaderLayout>
    );
  }
}
